<!-- CONTENT -->
<div id="tools-columns">
  <!-- ------------------- LEFT COLUMN -------------------------------- -->
  <div id="tools-columns-left">
    <div id="tools-menu-sticky-div">
      <div class="tools-menu-buttons">
        <button id="tool-ci-back-button" class="tools-button-accent">
          <i class="fas fa-angle-left"></i>
          <span id="tool-ci-back-button-text"></span>
        </button>
        <button id="tool-ci-start-button">
          <span id="tool-ci-start-button-text"></span>
        </button>
      </div>
      <div class="tools-menu-sections">
        <!-- sections menu -->
        <div
          id="tool-ci-section-general-options-button"
          class="tools-menu-button tools-menu-button-selected"
        >
          <i class="fas fa-sliders-h tools-menu-button-icon"></i>
          <div class="tools-menu-button-text">
            <span id="tool-ci-section-general-options-text"></span>
          </div>
        </div>
        <div
          id="tool-ci-section-advanced-options-button"
          class="tools-menu-button"
        >
          <i class="fas fa-tools tools-menu-button-icon"></i>
          <div class="tools-menu-button-text">
            <span id="tool-ci-section-advanced-options-text"></span>
          </div>
        </div>
        <div id="tool-ci-section-settings-button" class="tools-menu-button">
          <i class="fas fa-cog tools-menu-button-icon"></i>
          <div class="tools-menu-button-text">
            <span id="tool-ci-section-settings-text"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- ------------------- RIGTH COLUMN -------------------------------- -->
  <div id="tools-columns-right">
    <div id="tools-title"><span id="tool-ci-title-text"></span></div>
    <!-- input -->
    <div
      id="tool-ci-input-options-section-div"
      class="tools-columns-right-section"
    >
      <h3><span id="tool-ci-input-options-text"></span></h3>
      <div class="tools-columns-right-subsection">
        <label
          ><span id="tool-ci-input-files-text"></span>
          <ul id="tool-ci-input-list" class="tools-collection-ul"></ul>
        </label>
        <div
          class="tool-shared-columns-parent tool-shared-columns-parent-extra-margin-bottom"
        >
          <div class="tool-shared-columns-50">
            <button id="tool-ci-add-file-button">
              <span id="tool-ci-add-file-button-text"></span>
            </button>
          </div>
          <div class="tool-shared-columns-50">
            <button id="tool-ci-clear-list-button">
              <span id="tool-ci-clear-list-button-text"></span>
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- output -->
    <div
      id="tool-ci-output-options-section-div"
      class="tools-columns-right-section"
    >
      <h3><span id="tool-ci-output-options-text"></span></h3>
      <div class="tools-columns-right-subsection">
        <label
          ><span id="tool-ci-output-image-format-text"></span>
          <select id="tool-ci-output-image-format-select"></select>
        </label>

        <label
          ><span id="tool-ci-output-image-scale-text"></span>
          <i
            id="tool-ci-tooltip-output-size"
            class="fas fa-question-circle tools-tooltip-button"
            title="tooltip"
          ></i>
          <div
            class="tool-shared-columns-parent tool-shared-columns-parent-extra-margin-bottom tools-scale-div"
            style="margin-top: 15px"
          >
            <div class="tool-shared-columns-50-grow">
              <div class="tools-range-wrap">
                <input
                  type="range"
                  class="tools-range"
                  min="10"
                  max="100"
                  id="tool-ci-output-image-scale-slider"
                  value="100"
                />
                <ul class="tools-collection-ul tools-range-ul"></ul>
                <output class="tools-range-bubble set-display-none"></output>
              </div>
              <!--  -->
              <input
                id="tool-ci-output-image-scale-height-input"
                class="set-display-none"
                type="number"
                step="50"
                min="1"
                value="1000"
              />
              <input
                id="tool-ci-output-image-scale-width-input"
                class="set-display-none"
                type="number"
                step="50"
                min="1"
                value="1000"
              />
            </div>
            <div class="tool-shared-columns-25">
              <select id="tool-ci-output-image-scale-select">
                <option
                  id="tool-ci-output-image-scale-select-0-text"
                  value="0"
                ></option>
                <option
                  id="tool-ci-output-image-scale-select-1-text"
                  value="1"
                ></option>
                <option
                  id="tool-ci-output-image-scale-select-2-text"
                  value="2"
                ></option>
              </select>
            </div>
          </div>
        </label>

        <label
          ><span id="tool-ci-output-folder-text"></span
          ><i
            id="tool-ci-tooltip-output-folder"
            class="fas fa-question-circle tools-tooltip-button"
            title="tooltip"
          ></i>
          <ul id="tool-ci-output-folder" class="tools-collection-ul"></ul>
        </label>
        <div
          class="tool-shared-columns-parent tool-shared-columns-parent-extra-margin-bottom tools-scale-div"
        >
          <button
            id="tool-ci-change-folder-button"
            class="tool-shared-columns-50"
          >
            <span id="tool-ci-change-folder-button-text"></span>
          </button>
          <button
            id="tool-ci-open-folder-button"
            class="tool-shared-columns-50"
          >
            <span id="tool-ci-open-folder-button-text"></span>
          </button>
        </div>
      </div>
    </div>
    <!-- advanced output -->
    <div
      id="tool-ci-advanced-output-options-section-div"
      class="tools-columns-right-section set-display-none"
    >
      <h3><span id="tool-ci-advanced-output-options-text"></span></h3>
      <div class="tools-columns-right-subsection">
        <label
          ><span id="tool-ci-jpg-quality-text">JPG: quality</span>
          <div class="tools-range-wrap">
            <input
              type="range"
              class="tools-range"
              min="10"
              max="100"
              id="tool-ci-jpg-quality-slider"
              value="90"
            />
            <ul class="tools-collection-ul tools-range-ul"></ul>
            <output class="tools-range-bubble set-display-none"></output>
          </div>
        </label>
        <label><span id="tool-ci-jpg-mozjpeg-text">JPG: mozjpeg</span> </label>
        <label class="tools-toggle">
          <input type="checkbox" id="tool-ci-jpg-mozjpeg-checkbox" />
          <span class="tools-toggle-slider"></span>
        </label>
        <label class="tools-h3-extra-margin-top"
          ><span id="tool-ci-png-quality-text">PNG: quality</span>
          <div class="tools-range-wrap">
            <input
              type="range"
              class="tools-range"
              min="10"
              max="100"
              id="tool-ci-png-quality-slider"
              value="100"
            />
            <ul class="tools-collection-ul tools-range-ul"></ul>
            <output class="tools-range-bubble set-display-none"></output>
          </div>
        </label>
        <label class="tools-h3-extra-margin-top"
          ><span id="tool-ci-avif-quality-text">AVIF: quality</span>
          <div class="tools-range-wrap">
            <input
              type="range"
              class="tools-range"
              min="10"
              max="100"
              id="tool-ci-avif-quality-slider"
              value="50"
            />
            <ul class="tools-collection-ul tools-range-ul"></ul>
            <output class="tools-range-bubble set-display-none"></output>
          </div>
        </label>
        <label class="tools-h3-extra-margin-top"
          ><span id="tool-ci-webp-quality-text">WebP: quality</span>
          <div class="tools-range-wrap">
            <input
              type="range"
              class="tools-range"
              min="10"
              max="100"
              id="tool-ci-webp-quality-slider"
              value="80"
            />
            <ul class="tools-collection-ul tools-range-ul"></ul>
            <output class="tools-range-bubble set-display-none"></output>
          </div>
        </label>
      </div>
    </div>
    <!-- settings -->
    <div
      id="tool-ci-settings-section-div"
      class="tools-columns-right-section set-display-none"
    >
      <h3><span id="tool-ci-settings-text"></span></h3>
      <div class="tools-columns-right-subsection">
        <button id="tool-ci-settings-reset-button">
          <span id="tool-ci-settings-reset-button-text"></span>
        </button>
        <label><span id="tool-ci-setting-remember-text"></span></label>
        <label class="tools-toggle">
          <input type="checkbox" id="tool-ci-setting-remember-checkbox" />
          <span class="tools-toggle-slider"></span>
        </label>
      </div>
    </div>
  </div>
</div>
